<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-07 09:43:46
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-11-24 11:21:55
 * @FilePath: /hr_new_vue3/src/views/Management/Contract/BaseSetting/ContractTemplate/Components/AddTemplate/ContractBaseInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 合同基础设置 -->
<template>
  <div class="index">
    <a-form :model="formData.baseInfoData" ref="refForm" :rules="rules" auto-label-width>
      <a-form-item @change="change" label="签署员工" field="name" show-colon>
        <a-input v-model="userName" disabled></a-input>
      </a-form-item>
      <a-form-item label="选择企业签署方" field="companyId" show-colon>
        <a-select v-model="formData.baseInfoData.companyId">
          <a-option v-for="item in lawList" :key="item.id" :value="item.id" :label="item.name" />
        </a-select>
      </a-form-item>
      <a-form-item label="选择合同模板" field="templateName" show-colon>
        <!-- <a-select
          @popup-visible-change="
            (flag) => selectContractTemplate(flag, 'radio')
          "
          :popup-visible="templateSelect"
        >
        </a-select> -->
        <a-input @focus="(e) => selectContractTemplate(e, 'contractTemplate')" v-model="formData.baseInfoData.templateName"></a-input>
      </a-form-item>
      <a-form-item label="选择附件模板" field="annexName" show-colon>
        <a-input @focus="(e) => selectContractTemplate(e, 'annexTemplate')" v-model="formData.baseInfoData.annexName"></a-input>
      </a-form-item>
      <a-form-item label="描述" field="remark" show-colon>
        <a-textarea @change="change" v-model="formData.baseInfoData.remark" show-word-limit :max-length="50" :auto-size="{
            minRows: 4
          }"></a-textarea>
      </a-form-item>
    </a-form>
  </div>
  <ContractTemplateModal v-model:visible="contractTemplateVisible" @contract-template-emit="contractTemplateEmit" />
  <ContractAttachmentTemplateModal v-model:visible="contractAttachmentTemplateVisible" @contractAttachmentTemplateEmit="contractAttachmentTemplateEmit" />
</template>

<script setup lang="ts">
import { useContractStore } from '@/store';
import { useVModel } from '@vueuse/core';
import { cloneDeep } from 'lodash';
import { PerformanceAppraisal } from '@/apis/management/performance/baseSetting/template/type';
import { GetLegalEntityList } from '@/apis/management/organization/organizationManagement/LegalEntity/index';

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);

const rules = reactive({
  companyId: [
    {
      required: true,
      message: '请选择'
    }
  ],
  templateName: [
    {
      required: true,
      message: '请选择'
    }
  ]
});
const emit = defineEmits(['update:data']);
const change = () => {
  emit('update:data', formData.value);
};
// const formData = ref<any>({
//   name: '',
//   enterprise: 1,
//   templateId: undefined,
//   templateName: '',
//   annexIds: [],
//   annexName: [],
//   remark: ''
// });
const formData = useVModel(props, 'data', emit);
let userName = ref('');
watch(
  () => props.data.userData,
  (newVal: any) => {
    let tempUserName = [];
    newVal.forEach((el: any) => {
      tempUserName.push(el.name);
    });
    userName.value = tempUserName.join('、');
  },
  {
    deep: true
  }
);
const refForm = ref();
const validate = async () => {
  const check = await refForm.value.validate();
  console.log('=========================checkcheck===========');
  console.log(check);
  return check;
};

let lawList = ref([]); // 储存企业签署方数据
const getData = async () => {
  try {
    const [lawListRes] = await Promise.all([
      GetLegalEntityList({
        pageNumber: 0,
        pageSize: -1
      })
    ]);
    lawList.value = lawListRes.content;
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

let contractTemplateVisible = ref(false);
let contractAttachmentTemplateVisible = ref(false);
let templateSelect = ref(false);
let contractTemplateModalType = ref('');
let selectedId = ref([]);
const selectContractTemplate = (
  e: Event,
  type: 'contractTemplate' | 'annexTemplate'
) => {
  if (type === 'contractTemplate') {
    contractTemplateVisible.value = true;
  } else {
    contractAttachmentTemplateVisible.value = true;
  }
};

// 合同模板弹出框自定义事件
const contractTemplateEmit = (data: any) => {
  if (
    data[0].id !== formData.value.baseInfoData.templateId ||
    data[0].typeId !== formData.value.baseInfoData.templateTypeId
  ) {
    formData.value.baseInfoData.templateName = data[0].name;
    formData.value.baseInfoData.templateCodes = data[0].code;
    formData.value.baseInfoData.templateTypeId = data[0].typeId;
    formData.value.baseInfoData.templateId = data[0].id;
  }

  // formData.value.baseInfoData.templateInfo = {
  //   enterpriseName: data[0].enterpriseName, // 企业名称
  //   logo: data[0].logo, // 企业logo
  //   style: data[0].style // 模板页眉样式
  // };
  selectedId.value = [data[0].id];
  console.log('合同模板弹出框自定义事件', formData.value.baseInfoData);
};

// 附件弹出框自定义事件
const contractAttachmentTemplateEmit = (data: any) => {
  formData.value.baseInfoData.annexData = [];
  formData.value.baseInfoData.annexName = [];
  formData.value.baseInfoData.annexCodes = [];
  selectedId.value = [];
  data.forEach((el: any) => {
    formData.value.baseInfoData.annexData.push({
      name: el.name,
      typeId: el.typeId,
      id: el.id
    });
    formData.value.baseInfoData.annexName.push(el.name);
    // formData.value.baseInfoData.annexTypeIds.push(el.typeId);
    selectedId.value.push(el.id);
    // formData.value.baseInfoData.annexIds.push(el.id);
  });
  formData.value.baseInfoData.annexName.join('、');
  console.log('附件弹出框自定义事件', formData.value.baseInfoData);
};

defineExpose({ formData, validate });
</script>

<style lang="less" scoped>
.index {
  width: 800px;
  margin: 0 auto;
}
</style>
